<template>
  <el-dialog title="预览" v-model="show" width="1024px" destroy-on-close @open="handleOpen" top="5vh">
    <template v-if="data.type == 'html'">
      <!-- <div v-html="data.content"></div> -->
      <app-sandbox :html="data.content" />
    </template>
    <template v-else-if="data.type == 'doc'">
      <app-markdown-preview :content="data.content"></app-markdown-preview>
    </template>

    <template #footer>
      <el-button type="default" @click="handleSave" v-if="data.type == 'html'">保存</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { ElMessage } from 'element-plus'

import { saveHtmlAsFile } from '@/utils/util'

const { chatStore } = inject('/chat')

const show = defineModel({ type: Boolean })
const props = defineProps({
  data: Object,
})
const value = ref('')

const handleOpen = () => {
  value.value = ''
}

const handleSubmit = () => {
  chat.inputParamter(value.value)
  show.value = false
}

const handleSave = () => {
  saveHtmlAsFile(props.data.content, 'index.html')
  ElMessage.success('保存成功')
}
</script>
<style lang="scss" scoped>
:deep(.md-editor) {
  // background: none;
  padding: 0 16px;
}
</style>
